<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>团队排班</span>
      </div>
      <div class="div" >
        <img src="../../../../assets/蓝添加.png" @click="Insert()" v-show="isEdit !== 0" alt="">
        <span class="solid" @click="Insert()" v-show="isEdit !== 0">新增排班</span>
      </div>
    </header>
    <van-calendar
      :poppable="false"
      :show-confirm="false"
      :style="{ position: 'sticky', top : '44px', height: '45%', 'z-index': '999' }"
      :show-title="false"
      :row-height="44"
      color="#1DA4F2"
      @select="SelectDate"
      :min-date="minDate">
    </van-calendar>

    <van-collapse v-model="activeNames">
      <van-collapse-item  name="1">
        <template #title>
          <div class="label" ><a class="hengGang"></a>排班情况</div>
        </template>

        <div class="box" v-for="(childenItem, childenIndex) in PaiBanList"
             :key="childenIndex"
             @click.stop="lookHis(childenItem, childenIndex)">
          <div class="box_left">
            <p style="min-height: 30px" >
              <span>{{childenIndex}}</span>
            </p>
            <p  style="min-height: 30px" v-for="(item, index) in NAME(childenItem)" :key="index">
              {{item}}
            </p>
          </div>
          <div class="box_right" v-show="isEdit !== 0">
            <button @click.stop="upload(childenItem, childenIndex)">编辑</button>
            <button @click.stop="deleteBtn(childenItem)">作废</button>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="isLoading">
      <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="Object.keys(PaiBanList).length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../../../assets/空两本书.png')"
      description="暂无排班信息"
    />
    <van-dialog v-model="deleteShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认作废此次排班吗？"
                @confirm="deleteConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'TeamSchedulingList',
  data () {
    return {
      activeNames: ['1'],
      ITEM: '',
      deleteShow: false,
      doc_user_id: this.$route.query.userid,
      isLoading: true,
      dateday: new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toLocaleDateString().replace(/\//g, '-'),
      PaiBanList: [],
      team_id: this.$route.query.id,
      minDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
      isEdit: this.$route.query.isEdit
    }
  },
  computed: {
    NAME () {
      return function (item) {
        var allList = []
        var arrayObj = new Array()
        // // 先得到 所有的 名字
        for (var i = 0, l = item.length; i < l; i++) {
          if (!($.inArray(item[i].doc_user_id, arrayObj) >= 0)) {
            let obj = {
              doc_user_id: item[i].doc_user_id,
              NICK_NAME: item[i].NICK_NAME
            }
            arrayObj.push(obj)
          }
        }
        const res = new Map()
        arrayObj = arrayObj.filter((arrayObj) => !res.has(arrayObj.doc_user_id) && res.set(arrayObj.doc_user_id, 1))
        // // 循环userid 提取ITEM_NAME
        arrayObj.map((current, index) => {
          var ITEM_NAME = ''
          item.map((childen, childenIndex) => {
            if (current.doc_user_id === childen.doc_user_id) {
              if (childen.ITEM_NAME) {
                ITEM_NAME += childen.ITEM_NAME + '、'
              } else {
                ITEM_NAME += childen.ITEM_ID + '、'
              }
            }
          })
          allList.push(current.NICK_NAME + '-' + ITEM_NAME.slice(0, -1))
        })
        return allList
      }
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    // 选中日期
    SelectDate (value) {
      this.dateday = new Date(value).toLocaleDateString().replace(/\//g, '-')
      this.getDataList()
    },
    // 作废确认按钮
    deleteConfirm () {
      let ids = []
      if (this.ITEM && this.ITEM.length > 0) {
        this.ITEM.map((current, index) => {
          ids.push(current.id)
        })
      }
      ids = ids.toString()
      this.$http.updateTeamRosteDel({ids: ids})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.deleteShow = false
            this.getDataList()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 作废排班
    deleteBtn (item) {
      this.ITEM = item
      this.deleteShow = true
    },
    // 获取当天排班列表
    getDataList () {
      this.isLoading = true
      this.$http.findTeamSchedule({team_id: this.team_id, dateday: this.Common.formatDate(new Date(this.dateday), 'yyyy-mm-dd')})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.PaiBanList = res.data.data
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 查看历史记录
    lookHis (item, index) {
      let star = index.split('~')[0]
      let end = index.split('~')[1]
      this.$router.push({path: '/BuildTeamScheduling',
        query: {dateday: this.dateday,
          team_id: this.team_id,
          isEdit: 0,
          start_time: star,
          end_time: end
        }})
      // item.isEdit = 0
      // this.$router.push({path: '/ScheduleAddOrUpdate', query: item})
    },
    // 编辑历史记录
    upload (item, index) {
      // item.isEdit = 1
      // sessionStorage.setItem('TeamScheduling', JSON.stringify(item))
      let star = index.split('~')[0]
      let end = index.split('~')[1]
      this.$router.push({path: '/BuildTeamScheduling',
        query: {dateday: this.dateday,
          team_id: this.team_id,
          isEdit: 1,
          start_time: star,
          end_time: end
        }})
    },
    // 新增
    Insert () {
      this.$router.push({path: '/BuildTeamScheduling', query: {dateday: this.dateday, team_id: this.team_id}})
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.label{
  /*height: 44px;*/
  display: flex;
  align-items: center;
  /*padding: 0 10px;*/
  box-sizing: border-box;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  background: white;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}
.box{
  width: 100%;
  /*height: 60px;*/
  font-size: 15px;
  color: #333;
  /*padding: 0 16px;*/
  padding: 10px 16px;
  box-sizing: border-box;
  border-top: 1px solid #E5E5E5;
}

.box_left{
  width: 100%;
  min-height: 35px;
  /*height: 75px;*/
  display: flex;
  align-items: center;
  flex-direction: column;
}
.box_left p{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.box_left p span{
  margin-right: 15px;
}
.box_right{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.box_right button{
  width: 60px;
  height: 29px;
  border: 1px solid #1DA4F2;
  border-radius: 5px;
  background: #FFFFFF;
  color: #1da4f2;
  margin-left: 20px;
}
/deep/ .van-collapse-item__content{
  padding: 0 ;
}
/*日历样式修改 开始*/
/deep/ .van-calendar__weekday{
  line-height: 44px;
}
/deep/ .van-calendar__selected-day{
  width: 44px;
  height: 44px;
}
/*日历样式修改 结束*/
</style>
